<template>
  <el-row :gutter="20">
    <el-col :span="24">
      <el-card shadow="hover">
        <div slot="header" class="clearfix">
          <span>职业学历-工作经验分布</span>
          <el-select
              style="float: right;display: block"
              placeholder="工作类型"
              v-model="positionInfo.id"
              :props="{ expandTrigger: 'hover'}"
              clearable
              filterable>
            <el-option
                v-for="item in option"
                :key="item.value"
                :label="item.label"
                :value="item.value"
            ></el-option>
          </el-select>
        </div>
        <VisualPositionDetailDegreeCharts :position-info="positionInfo"></VisualPositionDetailDegreeCharts>
      </el-card>
    </el-col>
  </el-row>
</template>

<script>
import VisualPositionDetailDegreeCharts
  from "@/components/FormComponents/Charts/VisualPositionDetailDegreePieCharts.vue";

export default {
  name: "PositionDetailVisual",
  data() {
    return {
      option: [],
      positionInfo: {
        id: null,
        label: '全部行业'
      }
    }
  },
  watch: {
    'positionInfo.id': {
      immediate: true,
      handler(newValue) {
        console.log(newValue)
        console.log(this.option)
        const label = this.option.find(item => item.value === newValue)?.label
        this.positionInfo.label = label ? label : '全部行业'
      }
    }
  },
  components: {VisualPositionDetailDegreeCharts},
  mounted() {
    this.$api.getGenericSelect({"params": {type: 'position'}}).then(rep => {
      this.option = rep.data.filter(item => item.label !== '未知')
    })

  }
}
</script>

<style scoped>
.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both
}

</style>